<template>
  <div class="mainbox">
    <!-- 关闭此面板按钮 -->
    <span class="el-icon-close close"
          @click="closeRightPanel"></span>
    <div class="showInfo">
      <img :src='toInfo.avatar'
           class="toAvatar"
           @click="openUserDetailDialog">
      <div class="name">{{toInfo.nickName}}</div>
    </div>
    <div class="emoji">
      <VEmojiPicker v-show="emojiShow"
                    @select="selectEmoji" />
    </div>
    <!-- 显示和发送校区区 -->
    <div class="box1">
      <div class="showMessageContainer">

        <el-progress type="circle"
                     :percentage="percent"
                     class="file_progress"
                     :width="50"
                     :stroke-width="2"
                     v-if="showProgress"></el-progress>
        <!-- 点击后查看更多历史消息 -->
        <div class="historyMsg">
          <span @click="getHistoryMsg">查看更多消息</span>
        </div>
        <div class="msgWrap"
             v-for="msg in toMsg"
             :key="msg.m_ID">
          <message :message="msg"
                   :toInfo="toInfo"
                   @refreshNickname='refreshNickname'></message>
        </div>

        <div id="msg_end"
             style="height:0px; overflow:hidden"></div>

      </div>
      <div class="sendMessage">

        <div class="function">
          <span class="iconfont icon-expressions"
                @click="emojiShow = !emojiShow"></span>

          <el-upload class="upload-demo"
                     :action="this.$aimPath + '/uploadFile'"
                     :show-file-list="false"
                     :data="uploadFileData"
                     :before-upload="beforeFileUpload"
                     :on-success="handleFileSuccess"
                     :on-error="handleFileError">
            <span class="iconfont icon-wenjian"></span>
          </el-upload>

          <span class="iconfont icon-shipin"
                @click="video"></span>
        </div>

        <div class="editwrap">
          <div class="edit"
               contenteditable="true"
               v-html="editMessage"
               @keyup.delete="btnSendMsg"></div>

          <div class="buttonArea">
            <el-button type="primary"
                       size="mini"
                       @click="btnSendMsg">发送</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="callDialogVisible"
               width="100%"
               :before-close="handleCloseRTC"
               append-to-body
               :show-close="false">
      <my-trtc :userID="userID"
               :toUserID="toUserID"
               @endCall='endCall'
               style="height:100%"></my-trtc>
    </el-dialog>

    <!-- 询问是否进行通话 -->
    <el-dialog title="提示"
               :visible.sync="queryCallDialog"
               width="30%"
               :before-close="handleClose"
               append-to-body>
      <span>是否接受通话请求</span>
      <span slot="footer"
            class="dialog-footer">
        <!-- 通知对方不接受通话 -->
        <el-button @click="rejectCall">取 消</el-button>
        <!-- 通知对方接受通话 -->
        <el-button type="primary"
                   @click="agreeCall">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 点击用户头像后，显示用户的信息 -->
    <el-dialog :visible.sync="userDetailDialog"
               v-if="userDetailDialog"
               width="40%"
               append-to-body
               :before-close="handleClose">
      <div class="addfriend_wrap"
           v-if="toFlag === 'friend'">
        <img style="width:100px;height:100px"
             @click="photoVisible=true"
             :src="toUserDetail.u_HeadPortrait">
        <div class="message">
          <div>账号：<span>{{toUserDetail.u_LoginID}}</span></div>
          <div>昵称：<span>{{toUserDetail.u_NickName}}</span></div>
          <div>姓名：<span>{{toUserDetail.u_Name}}</span></div>
          <div>年龄：<span>{{toUserDetail.u_Age}}</span></div>
          <div>性别：<span>{{toUserDetail.u_Sex}}</span></div>
          <div>签名：<span>{{toUserDetail.u_Signature}}</span></div>
          <div>生日：<span>{{toUserDetail.u_Birthday}}</span></div>
          <div>邮箱：<span>{{toUserDetail.u_Email}}</span></div>
          <div>电话：<span>{{toUserDetail.u_Telephone}}</span></div>
          <div>介绍：<span>{{toUserDetail.u_Intro}}</span></div>
          <div><span>备注：</span>
            <el-input size="mini"
                      style="width:193px"
                      :placeholder="toUserInfo.nickName"
                      v-model="remarkName"></el-input>
          </div>
          <div style="margin-top:5px"><span>分组：</span>
            <el-select v-model="optionFriendGroup"
                       :placeholder="defaultFriendGroup"
                       size="mini">
              <el-option v-for="item in friendGroups"
                         :key="item"
                         :label="item"
                         :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="showInfo"
           v-if="toFlag === 'group'">
        <!-- 头像的显示 -->
        <div class="groupImg">
          <img :src="groupDetailInfo.ug_Icon"
               alt=""
               style="width:100px;height:100px">
        </div>

        <!-- 其它基本信息的显示 -->
        <div class="basicInfo">
          <div class="groupName"
               v-if="groupDetailInfo.ug_AdminID !== selfInfo.u_LoginID">
            <span>群名：</span> <span>{{groupDetailInfo.ug_Name}}</span>
          </div>
          <div class="groupName"
               v-if="groupDetailInfo.ug_AdminID === selfInfo.u_LoginID">
            <span>群名：</span>
            <el-input v-model="groupInfo.groupName"
                      size="mini"
                      style="width:150px"
                      :placeholder="groupDetailInfo.ug_Name"></el-input>
          </div>
          <div class="groupID">
            <span>群账号：</span> <span>{{groupDetailInfo.ug_GroupID}}</span>
          </div>
          <div class="createTime">
            <span>创建时间：</span> <span>{{groupDetailInfo.ug_CreateTime}}</span>
          </div>
          <div class="adminID">
            <span>管理员账号：</span> <span>{{groupDetailInfo.ug_AdminID}}</span>
          </div>
          <div class="groupIntro"
               style="margin-top:5px"
               v-if="groupDetailInfo.ug_AdminID !== selfInfo.u_LoginID">
            <span>群介绍：</span> <span>{{groupDetailInfo.ug_Intro}}</span>
          </div>
          <div class="groupIntro"
               v-if="groupDetailInfo.ug_AdminID === selfInfo.u_LoginID">
            <span>群介绍：</span>
            <el-input v-model="groupInfo.groupIntro"
                      size="mini"
                      style="width:300px"
                      :placeholder="groupDetailInfo.ug_Intro"></el-input>
          </div>
          <div class="groupName"
               v-if="groupDetailInfo.ug_AdminID !== selfInfo.u_LoginID">
            <span>群公告：</span> <span>{{groupDetailInfo.ug_Notice}}</span>
          </div>
          <div class="groupIntro"
               v-if="groupDetailInfo.ug_AdminID === selfInfo.u_LoginID"
               style="margin-top:5px">
            <span>群公告：</span>
            <el-input v-model="groupInfo.groupNotice"
                      size="mini"
                      style="width:300px"
                      :placeholder="groupDetailInfo.ug_Notice"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <!-- 打开弹窗 -->
        <el-button type="danger"
                   size="mini"
                   v-if="toFlag === 'group' & groupDetailInfo.ug_AdminID === selfInfo.u_LoginID"
                   @click="queryDestroyGroupDialog=true">删除该群</el-button>
        <el-button @click="userDetailDialog=false"
                   size="mini">取 消</el-button>
        <!-- 更新群的信息 -->
        <el-button type="primary"
                   @click="updataUserDetail"
                   size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 确定是否删除询问 -->
    <el-dialog title="提示"
               :visible.sync="queryDestroyGroupDialog"
               width="30%"
               append-to-body>
      <span>确定删除该群?</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="queryDestroyGroupDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="destroyGroup">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { VEmojiPicker } from 'v-emoji-picker'

import MyTrtc from '../test/MyTRTC.vue'

import Message from '../components/Message.vue'

export default {
  name: 'MessageBox',
  components: {
    VEmojiPicker,
    MyTrtc,
    Message
    // EditDiv
  },
  // 当前发送对象的消息
  props: ['toUserInfo', 'toUserMsg', 'selfInfo', 'groupOrFriendFlag', 'toGroupInfo', 'toGroupMsg',
    'queryCallDialog_', 'toUserID_', 'nickName_', 'callDialogVisible_', 'centerShow'],
  data () {
    return {
      // 待发送的信息
      sendMsg: {
        M_PostMessages: '',
        M_FromUserID: '',
        M_ToUserID: ''
      },
      // 表情包的显示
      emojiShow: false,
      // 待编辑的信息
      editMessage: '',
      // banner是否显示
      bannerVisible: false,
      // 当前显示的信息
      toInfo: {},
      // 当前的消息
      toMsg: [],
      // 当前聊天对象是朋友还是群
      toFlag: '',
      userID: '',
      // 视频聊天相关
      queryCallDialog: this.queryCallDialog_,
      toUserID: this.toUserID_,
      nickName: this.nickName_,
      callDialogVisible: this.callDialogVisible_,
      // 上传文件相关
      uploadFileData: {
        fromUserID: window.sessionStorage.getItem('selfInfo'),
        toUserID: '',
        flag: ''
      },
      // 上传进度条进度
      percent: 0,
      // 上传的进度条是否可见
      showProgress: false,
      // 定时器id
      intervalID: 0,
      // 定时器的间隔时间
      waitTime: 100,
      // 是否有文件上传，保证一次只有一个文件在上传
      isUpload: false,
      // 显示用户的详细信息弹窗
      userDetailDialog: false,
      // 当前用户的详细信息
      toUserDetail: {},
      // 当前用户默认的分组
      defaultFriendGroup: '',
      // 当前用户的已经创建的分组消息
      friendGroups: [],
      // 选择的用户分组
      optionFriendGroup: '',
      // 给好友的备注:
      remarkName: '',
      // 群的详细消息
      groupDetailInfo: {},
      // 群的可以修改的信息
      groupInfo: {
        groupName: '', // 群名
        groupIntro: '', // 群介绍
        groupNotice: '' // 群公告
      },
      // 询问是否删除该群
      queryDestroyGroupDialog: false
    }
  },
  created () {
    this.userID = window.sessionStorage.getItem('selfInfo')
    console.log('createe')

    if (this.centerShow === 'friends') {
      this.reviseToUser()
    } else if (this.centerShow === 'group') {
      this.reviseToGroup()
    }
  },

  mounted () {

  },
  watch: {
    toUserMsg: {
      handler (val, oldval) {
        this.toBottom()
      },
      deep: true
    },
    toGroupMsg: {
      handler (val, oldval) {
        this.toBottom()
      },
      deep: true
    },
    toUserInfo: {
      handler (val, oldval) {
        this.reviseToUser()
      },
      deep: true
    },
    toGroupInfo: {
      handler (val, oldval) {
        this.reviseToGroup()
      },
      deep: true
    },
    queryCallDialog_: {
      handler (val, oldval) {
        this.queryCallDialog = val
      }
    },
    toUserID_: {
      handler (val, oldval) {
        this.toUserID = val
      }
    },
    nickName_: {
      handler (val, oldval) {
        this.nickName = val
      }
    },
    callDialogVisible_: {
      handler (val, oldval) {
        this.callDialogVisible = val
      }
    }
  },
  methods: {
    // 发送表情包
    selectEmoji (emoji) {
      const t = document.getElementsByClassName('edit')
      this.emojiShow = false
      this.editMessage = t[0].innerHTML + '<span>' + emoji.data + '</span>'
    },

    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 发送信息按钮
    btnSendMsg () {
      const t = document.getElementsByClassName('edit')
      // 封装数据
      this.sendMsg.M_PostMessages = t[0].innerHTML
      this.sendMsg.M_FromUserID = window.sessionStorage.getItem('selfInfo')

      // 进行发送
      var qs = require('qs')
      if (this.groupOrFriendFlag === 'friend') { // 发送给朋友
        this.sendMsg.M_ToUserID = this.toUserInfo.loginID
        this.$http.post('sendMessageToUser', qs.stringify(this.sendMsg))
          .then((response) => {
            const res = response.data
            if (res.code !== 200) return this.$message.error(res.msg)
            else {
              t[0].innerHTML = ''
              return this.$message.success(res.msg)
            }
          })
      } else { // 发给一个群
        this.sendMsg.M_ToUserID = this.toGroupInfo.groupID
        this.$http.post('sendMessageToGroup', qs.stringify(this.sendMsg))
          .then((response) => {
            const res = response.data
            if (res.code !== 200) return this.$message.error(res.msg)
            else {
              t[0].innerHTML = ''
              return this.$message.success(res.msg)
            }
          })
      }
    },
    // 保证消息窗口滑动条在最底部
    toBottom () {
      this.$nextTick(() => {
        var container = this.$el.querySelector('.showMessageContainer')
        container.scrollTop = container.scrollHeight
      })
    },
    // 公告栏的显示
    switchBanner () {

    },
    // 当前对象为用户对象
    reviseToUser () {
      this.toInfo = this.toUserInfo
      this.toMsg = this.toUserMsg
      this.toFlag = 'friend'
      this.toUserID = this.toUserInfo.loginID
    },
    // 当前对象为群对象
    reviseToGroup () {
      this.toInfo = this.toGroupInfo
      this.toMsg = this.toGroupMsg
      this.toFlag = 'group'
    },
    // 有图片改变时
    beforeAvatarChange (file) {
      const t = document.getElementsByClassName('edit')
      this.editMessage = t[0].innerHTML + "<img  src='" + file.raw + "'>"
    },
    // 视频聊天 目前只支持一个双人聊天
    video () {
      if (this.toFlag === 'friend') {
        // 发起请求，通知对方接受自己的视频申请
        this.$http.get('callPhone', { params: { toUserID: this.toUserInfo.loginID, userID: this.selfInfo.u_LoginID, action: 'connect', nickName: this.selfInfo.u_NickName } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
        })
      } else this.$message.error('只支持单人聊天')
    },
    // 同意进行对话
    agreeCall () {
      // 关闭对话框
      this.queryCallDialog = false
      // 打开视频对话框
      this.callDialogVisible = true
      this.$message.success('等待对方进行连接')
      // 通知对方已经准备好了
      this.$http.get('callPhone', { params: { toUserID: this.toUserID, userID: '', action: 'agree', nickName: '' } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
      })
    },
    // 不同意对话
    rejectCall () {
      this.queryCallDialog = false
      this.$message.info('视频已经取消')
      this.$emit('resetQueryDialog')
      this.$http.get('callPhone', { params: { toUserID: this.toUserID, userID: '', action: 'reject', nickName: '' } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
      })
    },
    // 结束通话，并把父组件的querydialog也置为false
    endCall () {
      this.callDialogVisible = false
      this.$emit('endCall')
    },
    // 文件上传校验
    beforeFileUpload (file) {
      const size = file.size / 1024
      // 小于100kb
      if (size < 100) this.waitTime = 100
      // 小于1M
      else if (size < 1024) this.waitTime = 500
      // 小于10M
      else if (size < 1024 * 10) this.waitTime = 1000
      // 小于100M
      else if (size < 1024 * 100) this.waitTime = 1500
      else this.waitTime = 2000
      // 是否选中了一个对象 朋友或者群
      const flag1 = this.toFlag === ''
      if (flag1) {
        this.$message.error('请选择一个朋友或者群发送文件')
        return false
      }
      if (this.isUpload) {
        this.$message.error('一次只能上传一个文件')
        return false
      }
      if (this.toFlag === 'friend') { this.uploadFileData.toUserID = this.toInfo.loginID } else this.uploadFileData.toUserID = this.toInfo.groupID
      this.uploadFileData.flag = this.toFlag

      // 显示进度条，并设置一个定时器
      // 代表有文件上传
      this.isUpload = true
      this.$message.success('文件开始上传...')
      this.showProgress = true
      this.intervalID = setInterval(this.getFilePercent, this.waitTime)
      return true
    },
    // 文件上传成功
    handleFileSuccess (res, file) {
      this.$message.success(res.msg)
      this.showProgress = false
      clearInterval(this.intervalID)
      // 代表没有文件上传
      this.isUpload = false
    },
    // 文件上传失败
    handleFileError (res, file) {
      this.$message.error(res.msg)
      clearInterval(this.intervalID)
    },
    // 请求文件的进度条
    getFilePercent () {
      this.$http.get('getPercent').then((response) => {
        const res = response.data
        this.percent = parseInt(res.data)
      })
    },
    // 通话弹窗出现后，关闭弹窗，不再通话
    handleCloseRTC (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.endCall()
          // 通知对方自己取消了弹窗
          this.$http.get('callPhone', { params: { toUserID: this.toUserID, userID: '', action: 'cancel', nickName: '' } }).then((response) => {
            const res = response.data
            if (res.code !== 200) return this.$message.error(res.msg)
          })
          done()
        })
        .catch(_ => { })
    },
    // 更新好友的信息
    updataUserDetail () {
      if (this.toFlag === 'friend') {
        if (this.optionFriendGroup === '') {
          this.optionFriendGroup = this.defaultFriendGroup
        }

        if (this.remarkName === '') {
          this.remarkName = this.toUserInfo.nickName
        }
        this.$http.get('updateFriend', { params: { userID: this.selfInfo.u_LoginID, friendID: this.toUserInfo.loginID, nickname: this.remarkName, friendGroup: this.optionFriendGroup } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success(res.msg)
          // 父级重新请求自己的好友列表信息
          this.$emit('refreshFriend')

          // 修改当前列表的
          this.toInfo.nickName = this.remarkName
        })
        // 是群 且自己是管理员
      } else if (this.toFlag === 'group' & this.groupDetailInfo.ug_AdminID === this.selfInfo.u_LoginID) {
        // 修改群的相关信息
        if (this.groupInfo.groupName === '') {
          this.groupInfo.groupName = this.groupDetailInfo.ug_Name
        }

        if (this.groupInfo.groupIntro === '') {
          this.groupInfo.groupIntro = this.groupDetailInfo.ug_Intro
        }

        if (this.groupInfo.groupNotice === '') {
          this.groupInfo.groupNotice = this.groupDetailInfo.ug_Notice
        }
        this.$http.get('updateGroup', { params: { groupID: this.groupDetailInfo.ug_GroupID, groupName: this.groupInfo.groupName, groupIntro: this.groupInfo.groupIntro, groupNotice: this.groupInfo.groupNotice } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success(res.msg)

          // 修改当前列表的
          this.toInfo.nickName = this.groupInfo.groupName

          // 通知上级刷新群列表
          this.$emit('refreshGroup')
        })
      }
      this.userDetailDialog = false
    },
    // 打开用户的的细节窗口
    openUserDetailDialog () {
      this.userDetailDialog = true
      if (this.toFlag === 'friend') {
        this.$http.get('userinfo', { params: { username: this.toUserInfo.loginID } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success(res.msg)
          this.toUserDetail = res.data
        })

        this.$http.get('friendgroupandfriend', { params: { userID: this.selfInfo.u_LoginID, friendID: this.toUserInfo.loginID } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success(res.msg)
          this.friendGroups = res.data.groups
          this.defaultFriendGroup = res.data.default
        })
      } else if (this.toFlag === 'group') {
        this.$http.get('getSingleGroup', { params: { groupID: this.toGroupInfo.groupID } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          this.groupDetailInfo = res.data
          this.$message.success(res.msg)
        })
      }
    },
    // 删除这个群
    destroyGroup () {
      this.$http.get('deleteGroup', { params: { groupID: this.toGroupInfo.groupID } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        // 刷新群的信息
        // 通知上级刷新群列表
        this.$emit('refreshGroup')
      })

      this.queryDestroyGroupDialog = false
      this.userDetailDialog = false
    },
    // 刷新所有的message的昵称
    refreshNickname (msg) {
      this.$emit('refreshNickname', msg)
    },
    // 得到历史消息
    getHistoryMsg () {
      // 朋友之间的聊天
      if (this.toFlag === 'friend') {
        if (this.toUserMsg.length === 0) {
          return this.$message.info('没有历史消息了')
        }
        this.$http.get('getFriendHistoryMsg', { params: { sendID: this.selfInfo.u_LoginID, receiveID: this.toUserInfo.loginID, mID: this.toUserMsg[0].m_ID } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.info(res.msg)
          this.$message.success(res.msg)
          // 刷新群的信息
          // 通知上级刷新群列表
          this.$emit('refreshFriendHistoryMsg', res.data, this.toUserInfo.loginID)
        })
      } else if (this.toFlag === 'group') {
        if (this.toGroupMsg.length === 0) {
          return this.$message.info('没有历史消息了')
        }
        this.$http.get('getGroupHistoryMsg', { params: { groupID: this.toGroupInfo.groupID, mID: this.toGroupMsg[0].m_ID } }).then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.info(res.msg)
          this.$message.success(res.msg)
          // 刷新群的信息
          // 通知上级刷新群列表
          this.$emit('refreshGroupHistoryMsg', res.data, this.toGroupInfo.groupID)
        })
      }
    },
    // 关闭右边面板
    closeRightPanel () {
      this.$emit('closeRightPanel')
    }
  }
}
</script>

<style lang="less" scoped>
//本地流
.local-stream {
  width: 100%;
  height: 300px;
}
//远端流
.distant-stream {
  width: 100%;
  height: 300px;
}

img {
  width: 100px;
}
// main区域
.mainbox {
  overflow: hidden;
  position: relative;
  .close {
    position: absolute;
    right: 7px;
    top: 5px;
    color: #d3dae0;
    cursor: pointer;
    :hover {
      color: rgba(100, 180, 245, 0.747);
    }
  }
  // 显示用户或者群组信息
  .showInfo {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #9195a323;
    box-shadow: 0px -10px 15px 2px #9195a3;

    .toAvatar {
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .name {
      margin-left: 10px;
      font-family: "黑体";
      font-weight: bold;
    }
  }

  .box1 {
    border-left: 1px solid #9195a323;
    border-bottom: 1px solid #9195a323;
    position: relative;
    height: 550px;

    .file_progress {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .banner {
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      color: silver;
      border-bottom: 1px solid #9195a323;
    }
    .showMessageContainer {
      height: 400px;
      overflow: auto !important;
      padding: 10px;
      float: right;
      width: 750px;

      .historyMsg {
        text-align: center;
        position: relative;
        top: -10px;
        span {
          color: #a3d4ff;
          font-size: 12px;
          cursor: pointer;
        }
      }

      // 自己的消息
      .messagewrap {
        align-items: center;
        width: 100%;
        position: relative;
        margin-top: 10px;
      }
    }

    .sendMessage {
      height: 150px;
      position: absolute;
      top: 400px;
      width: 740px;
      .function {
        margin-left: 5px;

        span {
          border: 0;
          background-color: #fff;
          color: #9195a3b2;
          margin-left: 10px;
          font-size: 18px;
          border-radius: 50%;
        }

        span:hover {
          background-color: rgba(160, 148, 148, 0.151);
        }

        .avatar-uploader {
          display: inline-block;
          position: relative;
          top: 10px;
        }
        .upload-demo {
          display: inline-block;
        }
      }

      .editwrap {
        padding: 5px 0;

        .edit {
          border: 1px solid #9195a323;
          border-radius: 5px;
          height: 80px;
          outline: none;
          padding: 2px 5px;
          border-left: 0;
        }

        .buttonArea {
          float: right;
          margin-top: 5px;
          margin-right: 10px;
        }
      }
    }
  }
}

.emoji {
  height: 350px;
  position: absolute;
  top: 95px;
  z-index: 1;
}

.addfriend_wrap {
  margin-left: 95px;
}

.dialog-footer {
  padding-right: 0;
}
</style>
